import { GrowlMessageType } from './../../components/messageBox/growMeaageType';
import { MessageBoxService } from './../../components/messageBox/messageBoxService';
import { Employee } from './../../models/Employee';
import { Component, Input, Output, EventEmitter, OnInit, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: "chef-make",
    template: `
        <div fxLayout="column" class="chef-make">
            <div class="make-title" fxLayout="row">
                <span class="padding-m" fxFlex="65%" fxLayoutAlign="start center">制作 {{foodItem.inventory.name}}</span>
                <span fxFlex="25%" fxLayoutAlign="center center">
                    库存余量：{{foodItem.quantity || 0}}
                </span>
                <span fxFlex="10%" fxLayoutAlign="center center" (click)="produceOpe(produceCount)"><i class="material-icons">close</i></span>
            </div>
            <div fxLayout="row" class="make-content">
                <div fxLayoutAlign="center center" fxFlex="50%" class="text-l padding-m" *ngIf="!producers || !producers.length">没有厨师数据，请到“店铺管理”添加</div>
                <div fxLayout="column" class="padding-m" fxFlex="50%" *ngIf="producers && producers.length">
                    <span class="input-title" fxLayoutAlign="start center">选择厨师</span>
                    <div class="info-box pct100">{{selectedProducer && selectedProducer.user.name}}</div>
                    <ul fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" class="maker-list">
                        <li *ngFor="let producer of producers" class="maker-item margin-t-m text-l">
                            <span class="maker-name" (click)="changeProducer(producer)">{{producer.user.name}}</span>
                        </li>
                    </ul>
                </div>
                <div fxLayout="column" class="padding-m relative make-detail" fxFlex="50%">
                    <span class="input-title" fxLayoutAlign="start center">输入制作量</span>
                    <div fxLayout="row" fxLayoutAlign="space-between">
                        <div class="info-box pct80 word-break">{{produceCount}}</div>
                        <span class="btn-add" (click)="addCount()" fxLayoutAlign="center center"><i class="material-icons text-large">add</i></span>
                    </div>
                    <div class="keyboard margin-t-m">
                        <digital-keyboard (clickEvent)="changeKeyboard($event)"></digital-keyboard>
                    </div>
                    <button class="btn-primary btn-keyboard pct100 margin-b-s text-xxl margin-t-m" (click)="produceOpe()">确认</button>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['./home.component.scss']
})

export class ChefMake implements OnInit, AfterViewInit {
    @Output() close: EventEmitter<any> = new EventEmitter<any>();
    @Input() foodItem;
    @Input() producers;
    @Input() selectedProducer: Employee;
    @Input() produceCount;

    constructor(private el: ElementRef) { }
    ngOnInit() {

    }
    ngAfterViewInit() {
        if(this.producers && this.producers.length){
            this.dynamicWidth()
        }
    }

    addCount() {
        this.produceCount = parseInt(this.produceCount) + 1 + '';
    }

    changeKeyboard(event) {
        this.produceCount = event(this.produceCount);
    }

    changeProducer(producer) {
        this.selectedProducer = producer;
    }

    produceOpe(produceCount?: string) {
        let data = {
            isProducing: false,
            selectedProducer: this.selectedProducer,
            produceItem: this.foodItem,
            produceCount: this.produceCount,
            produced: true
        }
        if (produceCount) {
            data.produceCount = produceCount;
            data.produced = false;
        }

        if (!produceCount) {
            data.produceItem.endTime = new Date().getTime();
            this.produceCount = '0';
        }

        if (!produceCount && !data.selectedProducer) {
            MessageBoxService.current.Growl(GrowlMessageType.Error, "请选择制作员");
            return false;
        }
        if (!produceCount && (!data.produceCount || data.produceCount == '0')) {
            MessageBoxService.current.Growl(GrowlMessageType.Error, "请输入制作数量");
            return false;
        }
        this.close.emit(data);
    }

    dynamicWidth(i = 2) {
        let parent = this.el.nativeElement.querySelector('.maker-list');
        let parentHeight = parent.clientHeight;
        let parentScrollHeight = parent.scrollHeight;
        let children = parent.children;
        if (parentScrollHeight > parentHeight) {
            Array.from(children).forEach(x => {
                (<any>x).style.width = (<any>((1 / (i + 1)) * 100)).toFixed(4) + "%";
            });
            this.dynamicWidth(i + 1);
        }
    }
}